<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>添加优惠券</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  
  <body>
    <div class="x-body">
        <form class="layui-form">

          <div class="layui-form-item">
              <label  class="layui-form-label">
                  优惠券名称
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="couponname" name="couponname" class="layui-input" placeholder="请输入优惠券名称">
              </div>
          </div>

          <div class="layui-form-item">
                <label  class="layui-form-label">
                    类型
                </label>
                <div class="layui-input-inline">
                    <select name="coupontype" id="coupontype">
                        <option value="现金券">现金券</option>
                        <option value="折扣券">折扣券</option>
                    </select>
                </div>
          </div>

            <div class="layui-form-item">
                <label  class="layui-form-label">
                    优惠金额
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="couponprice" name="couponprice" class="layui-input">
                </div>
                     <label  class="layui-form-label" style="margin-left: -90px">元 </label>
                     <label  class="layui-form-label">满</label>
                <div class="layui-input-inline">
                    <input type="text" id="coupontoprice" name="coupontoprice" class="layui-input">
                </div>
                <label  class="layui-form-label" style="margin-left: -50px">元可用？ </label>
            </div>

            <div class="layui-form-item">
                <label  class="layui-form-label">
                    有效期
                </label>
                <div class="layui-input-inline">
                    <input type="radio"  name="coupontime" lay-filter="radio-filter" value="0" title="指定有效期">
                </div>
                <div class="layui-input-inline">
                    <input type="radio" name="coupontime" lay-filter="radio-filter" value="1" title="领取后几天内有效" checked>
                </div>
            </div>

            <div class="layui-form-item" id="dateTime">
                <div class="layui-input-inline" style="margin-left: 110px">
                    <input type="text" id="coupondateday" name="coupontime" value="30" class="layui-input">
                </div>
                <label class="layui-form-label" style="margin-left: -54px">天内有效</label>
            </div>

            <div class="layui-form-item" id="dateRange" style="display: none">
                <div class="layui-input-inline" style="margin-left: 110px">
                    <input  type="text" class="layui-input" name="coupontime"  id="coupondaterange" placeholder="请选择起止日期">
                </div>
            </div>



            <div class="layui-form-item">
                <label class="layui-form-label">
                    优惠券描述
                </label>
                <div class="layui-input-inline">
                    <textarea name="coupondesc" id="coupondesc" placeholder="请输入优惠券描述，用户将在手机端看到该描述" class="layui-textarea"></textarea>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">
                    优惠券图片
                </label>
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn" id="couponImgSelect">
                        <i class="layui-icon">&#xe67c;</i>选择图片
                    </button>
                    <img src="" id="couponImg" class="carouselImg" style="width: 90px">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">
                    发行总量(张)
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="couponnum" name="couponnum" class="layui-input">
                </div>

                <label class="layui-form-label">
                    每人限领(张)
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="couponlimit" name="couponlimit" class="layui-input">
                </div>
            </div>



            <div class="layui-form-item">
                <label  class="layui-form-label">
                    使用范围
                </label>
                <div class="layui-input-inline">
                    <input type="radio" name="coupongoods"  lay-filter="radio-filter" value="2" title="全场通用" checked>
                </div>
                <div class="layui-input-inline">
                    <input type="radio" name="coupongoods" lay-filter="radio-filter" value="3" title="指定商品" >
                </div>
    <!--            <div class="layui-input-inline">
                    <input type="radio" name="coupongoods" lay-filter="radio-filter" value="4" title="指定类别" >
                </div>-->
                <div class="layui-input-inline" id="coupongoods" style="display: none">
                    <input  type="text" class="layui-input" name="coupongoods"  id="goodsSelect" placeholder="输入关键字搜索商品">
                </div>
                <div class="layui-input-inline" id="searchGoodsSelect" style="display: none">
<!--                    <div style="background: #00F7DE;border-radius: 2px;width: 200px;height: 20px;text-align: center">-->
<!--                        <span><i class="layui-icon">&#xe605;</i>香蕉<i style="margin-left: 10px" class="layui-icon" onclick="del()">&#x1006;</i></span>-->
<!--                    </div>-->

                </div>
            </div>

            <div class="layui-form-item">
              <label  class="layui-form-label">
              </label>
              <button  class="layui-btn" lay-filter="addCoupon" lay-submit="" id="addCoupon">
                  保存
              </button>
          </div>
      </form>
    </div>
    <script>
        /*删除数组中指定下标的元素,arr-数组,item-元素值*/
        function remove(arr, item) {
            for(var i=arr.length-1;i>=0;i--)
            {
                if(arr[i]==item)
                {
                    arr.splice(i,1);
                }
            }
            return arr;
        }

        /*进点击的商品id保存*/
        var coupongoodsArry=[]
        function getGoods(gid){
            coupongoodsArry.push(gid)
            var item='<i  class="layui-icon icon'+gid+'">&#xe605;</i><i  style="margin-left: 10px" class="layui-icon icon'+gid+'" onclick="delGoods('+gid+')">&#x1006;</i>'
            $('#id'+gid).append(item)
            layer.alert('商品已添加', {icon: 6});
        }

        function delGoods(gid) {
            // alert("删除")
            remove(coupongoodsArry,gid)
            layer.alert('商品已删除', {icon: 5});
        //    清除div中的icon
            $('.icon'+gid).remove()
        }
        layui.use(['upload','form','layer','laydate','dropdown'], function(){
            $ = layui.jquery;
          var form = layui.form
          ,layer = layui.layer
        ,upload = layui.upload
            ,laydate=layui.laydate

            //当鼠标位于input上面有输入的时候
            $('#goodsSelect').on('compositionend',e=>{
                var keyword = e.delegateTarget.value;
                console.log(keyword)
                //请求即可
                $.ajax({
                    url: 'http://localhost:8080/goods/getGoodsByKey/'+keyword,
                    processData:false,
                    contentType:false,
                    async:false,
                    dataType:'json',
                    success:function(res){
                        $('#searchGoodsSelect').empty()
                        console.log(res)
                        data = res.data
                        for (var i=0;i<data.length;i++){
                            // var item='<option onclick="getGoods('+data[i].gid+')" id="'+data[i].gid+'" value="'+data[i].gid+'">'+data[i].goodstitle+'</option>'
                           var item='<div id="id'+data[i].gid+'"  style="background: #00F7DE;border-radius: 2px;width: 400px;height: 20px;text-align: center;margin: 2px;">\n' +
                               '                        <span>'+data[i].goodstitle+'</span><i onclick="getGoods('+data[i].gid+')" class="layui-icon">&#xe654;</i>\n' +
                               '                    </div>'
                            $('#searchGoodsSelect').append(item)
                        }
                    }
                })
            })



            laydate.render({
                elem: '#coupondaterange',//指定html中的id
                range:'~' //自定义分割字符
            })

            var couponimg;
            upload.render({
                elem: '#couponImgSelect'
                ,multiple: false //多文件上传为true
                ,accept: 'file'//指定允许上传时校验的文件类型
                ,auto: false  //自动上传为true
                ,choose: function(obj){//选择完文件后的回调函数
                    obj.preview(function (index, file, result) {
                        couponimg=file
                        console.log(couponimg);
                        $('#couponImg').attr('src', result); //图片链接（base64）直接将图片地址赋值给img的src属性
                    });
                }
            })

            // radio 点击事件
            form.on('radio(radio-filter)', function(data) {
                var elem = data.elem; // 获得 radio 原始 DOM 对象
                var checked = elem.checked; // 获得 radio 选中状态
                var value = elem.value; // 获得 radio 值
                var othis = data.othis; // 获得 radio 元素被替换后的 jQuery 对象
                // layer.msg(['value: '+ value, 'checked: '+ checked].join('<br>'));
                if (value==0){
                    $('#dateTime').css({"display":"none"});
                    $('#dateRange').css({"display":"block"});
                } else if(value==1){
                    $('#dateTime').css({"display":"block"});
                    $('#dateRange').css({"display":"none"});
                } else if (value==2){
                    $('#coupongoods').css({"display":"none"});
                    coupongoods=0
                } else if (value==3){
                    $('#coupongoods').css({"display":"block"});
                    $('#searchGoodsSelect').css({"display":"block"});
                }

            })

            form.on('submit(addCoupon)',function (data){
                var coupondaterange
                var coupondateday
                var val=$('input:radio[name="coupontime"]:checked').val();
                if (val==0){
                    coupondaterange=$('#coupondaterange').val()
                    coupondateday=0
                }else{
                    coupondateday=$('#coupondateday').val()
                    coupondaterange=0
                }

                var coupongoods
                var val=$('input:radio[name="coupongoods"]:checked').val();
                if (val==2){
                    coupongoods="全部商品"
                }else{
                    coupongoods=coupongoodsArry
                }
                var formData=new FormData()
                formData.append("file",couponimg)
                formData.append("couponname",$('#couponname').val())
                formData.append("coupontype",$('#coupontype').val())
                // formData.append("couponprice",$('#couponprice1').val()+"元(满"+$('#couponprice2').val()+"元可用)")
                formData.append("couponprice",$('#couponprice').val())
                formData.append("coupontoprice",$('#coupontoprice').val())
                // formData.append("coupontime",coupontime)
                formData.append("coupondateday",coupondateday)
                formData.append("coupondaterange",coupondaterange)
                formData.append("coupondesc",$('#coupondesc').val())
                formData.append("couponnum",$('#couponnum').val())
                formData.append("couponlimit",$('#couponlimit').val())
                formData.append("coupongoods",coupongoods)
                console.log(formData.toString())
                $.ajax({
                    url: 'coupon/addCoupon',
                    type:'post',
                    data:formData,
                    processData:false,
                    contentType:false,
                    async:false,
                    dataType:'json',
                    success:function (res){
                        // layer.alert('添加成功', {icon: 6});
                        alert('添加成功')
                        console.log(res)
                        layer.msg('添加成功', {icon: 1});
                    }

                })

            })


          
          
        });
    </script>
    <script>var _hmt = _hmt || []; (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();</script>
  </body>

</html>